<!DOCTYPE html>
<html>
<head>
    <title>Resistor Network Diagram</title>
</head>
<body>
    <canvas id="resistor-network-canvas" width="550" height="250"></canvas>
    <script>
        const canvas = document.getElementById('resistor-network-canvas');
        const ctx = canvas.getContext('2d');

        // Style and geometry parameters
        const s = 80;      // Side length of the square
        const x0 = 50;     // Initial x-coordinate
        const y0 = 85;     // Initial y-coordinate (top edge)
        const gap = 60;    // Width of the gap in the middle
        const lineWidth = 2;

        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = 'black';

        // --- Draw the first two squares ---
        ctx.beginPath();
        // Outer rectangle for squares 1 and 2
        ctx.rect(x0, y0, 2 * s, s);
        // Vertical line separating square 1 and 2
        ctx.moveTo(x0 + s, y0);
        ctx.lineTo(x0 + s, y0 + s);
        ctx.stroke();

        // --- Draw the gap with dashed lines ---
        ctx.beginPath();
        ctx.setLineDash([6, 6]);
        // Top dashed line
        ctx.moveTo(x0 + 2 * s, y0);
        ctx.lineTo(x0 + 2 * s + gap, y0);
        // Bottom dashed line
        ctx.moveTo(x0 + 2 * s, y0 + s);
        ctx.lineTo(x0 + 2 * s + gap, y0 + s);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // --- Draw the last two squares (N-1 and N) ---
        const lastSquaresX = x0 + 2 * s + gap;
        ctx.beginPath();
        // Outer rectangle for squares N-1 and N
        ctx.rect(lastSquaresX, y0, 2 * s, s);
        // Vertical line separating square N-1 and N
        ctx.moveTo(lastSquaresX + s, y0);
        ctx.lineTo(lastSquaresX + s, y0 + s);
        ctx.stroke();

        // --- Add Labels ---
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Labels for squares 1 and 2 (upright font)
        ctx.font = '24px Times New Roman';
        ctx.fillText('1', x0 + s / 2, y0 + s / 2);
        ctx.fillText('2', x0 + 1.5 * s, y0 + s / 2);

        // Labels for squares N-1, N and points A, B (italic font for variables)
        ctx.font = 'italic 24px Times New Roman';
        // Using an en dash '–' for a better look in 'N–1'
        ctx.fillText('N–1', lastSquaresX + s / 2, y0 + s / 2);
        ctx.fillText('N', lastSquaresX + 1.5 * s, y0 + s / 2);

        // Point A
        ctx.fillText('A', x0 - 20, y0 + s);
        // Point B
        ctx.fillText('B', lastSquaresX + 2 * s + 5, y0 - 15);

    </script>
</body>
</html>